<template>
	<view class="box">
		<navNav :navobj="navobj"></navNav>
		<scroll-view @scroll="scroll" class="scroll-view" scroll-y="true" refresher-enabled="true"
		  :refresher-triggered="triggered"  
			@refresherrefresh="pulldown" @scrolltolower="scrolltolower" >
		<view v-if="detail != null">
			<view class="swiper">
				<swiper indicator-dots class="swiperBox">
					<swiper-item class="item" v-for="(item,index) in detail.sliderImage" :key="index">
						<image mode="aspectFill" class="img" :src="item"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="titleBox">
				<view class="top">
					<view class="text">服务保障</view>
					<view class="tips">{{detail.serviceGuaranteeDetail}}</view>
				</view>
				<view class="flex_column_center_start form">
					<view class="title">{{detail.storeName}}</view>
					<view class="price"><span class="icon">￥</span>{{total}}起
					<!-- <span class="unit">每{{detail.attrValueList[0].attrValue[0].unit}}</span> -->
						<span class="unit"> 上门服务费 | 可抵扣订单金额</span>
					</view>
					<view class="cost">已服务{{detail.cost || 0}}单 | 平台监管价 | 杜绝乱收费</view>
				</view>
				<view class="line"></view>
				<view class="bottom">
					<uni-icons type="location" style="margin-top: -4rpx;"></uni-icons>
					<view class="address">{{address ? address: '未知' }}</view>
					<view class="time">{{getNextHour()}}</view>
				</view>
			</view>
			<view class="tabBox" :style="{position:isxiding?'sticky':'static'}">
				<view class="tabList">
					<view @click="choosetabIndex(0)" class="tab" :class="tabIndex === 0?'act':''">服务详情</view>
					<view @click="choosetabIndex(1)" class="tab" :class="tabIndex === 1?'act':''">用户评价</view>
					<!-- <view class="tab" :class="tabIndex === 2?'act':''">常见问题</view> -->
				</view>
			</view>
			<swiper @change="changeswiper" class="swipertwo" :current="tabIndex"  circular>
				<swiper-item >
					<image v-if="tabIndex===0" class="detailImg" mode="widthFix" v-for="(item,index) in detail.storeDetail" :key="index"
							:src="item"></image>
				</swiper-item>
				<swiper-item >
					<!-- <scroll-view @scroll="scroll" style="width: 750rpx;height: 800rpx;" :scroll-y="scrollytwo"> -->
						<view v-if="tabIndex===1">
							<view v-if="detail.reviews.length>0" style="width: 670rpx;margin: 0 auto;">
							<view v-if="pingjialist.total>0" style="display: flex;align-items: center;justify-content: space-between;">
								<view style="font-size: 34rpx;color: #999;" >总条数{{pingjialist.total}}</view>
								<view @click="gomorepingjia()" style="font-size: 34rpx;color: #999;">查看更多评价</view>
							</view>
								<view style="margin-top: 10rpx;margin-bottom: 60rpx;" v-for="(item,index) in pingjialist.rows" :key="index">
									<view style="display: flex;align-items: center;justify-content: space-between;">
										<view style="display: flex;align-items: center;">
											<image style="width: 100rpx;height: 100rpx;border-radius: 100%;" :src="item.image?JSON.parse(item.image):'../../static/img/home/exp.jpg'  " mode="aspectFill"></image>
											<view style="height: 100rpx; display: flex;flex-direction:column;justify-content: space-around;margin-left: 20rpx;">
												<view style="display: flex;align-items: center;">
													<view style="font-size: 32rpx;font-weight: 600rpx;">{{item.serverName? item.serverName:'暂无'}}</view>
													<view v-if="item.commentUser.remark!=null" style="margin-left: 20rpx; background-color: red;border-radius: 10rpx;color: #fff; font-size: 22rpx;font-weight: bold;padding: 2rpx 12rpx;box-sizing: border-box;">{{item.commentUser.remark}}</view>
												</view>
												
												<view style="color: #ccc; font-size: 24rpx;font-weight: 500rpx;">{{item.userPhone?item.userPhone:'暂无'}}</view>
											</view>
										</view>
										<view style="font-size: 24rpx;color: #ccc;">{{item.createTime}}</view>
									</view>
									<view class="rate" style="display: flex;align-items: center;">
										<uni-rate style="font-size: 24rpx;" v-model="item.score"></uni-rate>
										<view style="font-size: 24rpx;color: #ccc;">已购买{{JSON.parse( item.itemAttrValueJson)}}</view>
									</view>
									<view style="color: #ccc; font-size: 28rpx;font-weight: 500rpx;margin-top: 20rpx;">{{item.comment}}</view>
								  <block v-if="item.image!=null">
									<view v-for="(item2,index2) in JSON.parse(item.image)" :key="index" >
										<image style="margin-top: 20rpx;margin-right: 20rpx; width: 120rpx;height: 120rpx;" :src="item2" mode="aspectFill"></image>
									</view>
									</block>
								</view>
							</view>
							<view v-else style="text-align: center; color: #ccc; font-size: 28rpx;font-weight: 500rpx;margin-top: 20rpx;">暂无评价</view>
						</view>
						<!-- <view style="height: 400rpx;"></view>
						</scroll-view> -->
				</swiper-item>
			</swiper>
		
		
		
			
			
			
		</view>
		
		
		
		<view style="height: 400rpx;"></view>
		</scroll-view>
		<!-- 提现 -->
		<view v-show="visible">
			<view @click="clickMask" v-show="visible" style=" position: fixed;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 750rpx;background: rgba(0,0,0,0.5);z-index:999;"></view>
		  <view style="z-index: 999;width: 750rpx;height: 700rpx;z-index:999;border-radius: 20rpx 20rpx 0 0;background-color: #fff; background-color: #fff;" :class="visible?'isactive':'none'" class="popup-content " >
		     <view class="window">
		     	<view class="title" style="margin-bottom: 30rpx;">
		     		<span >规格选择</span>
		     		<uni-icons @click="close" type="closeempty"></uni-icons>
		     	</view>
		     	<view class="shopBox">
		     		<image class="img" mode="aspectFill" :src="detail.image"></image>
		     		<view class="price"><span class="icon">￥</span>{{total}}</view>
		     	</view>
		     	<scroll-view scroll-y class="listBox">
		     		<view class="item"
		     			v-for="(item,index) in detail.attrValueList" :key="index">
		     			<view class="titleName">{{item.name}}<span v-if="item.attrValue[0].unit">({{item.attrValue[0].unit}})</span></view>
		     			<view class="attrBox">
		     				<view class="attrItem"  @click="choose(itemAttr,index)" :class="actList.includes(itemAttr.id)?'act':''" v-for="(itemAttr,indexAttr) in item.attrValue" :key="indexAttr">
		     					{{itemAttr.suk}}
		     				</view>
		     				
		     			</view>
		     		</view>
		     	</scroll-view>
		     	<view class="buttonList">
		     		<view class="button" @click="type === 2?toBuy():addShop()">{{type===2?'下单':'加入'}}</view>
		     	</view>
		     </view>
		     
			</view>
		</view>
		
		<view class="buttonBox">
			<button open-type="contact" class="kefu" bindcontact="handleContact">
				<uni-icons size="22" type="headphones"></uni-icons>
				<view class="name">客服</view>
			</button>
			<view class="labelBox" @click="gocar()" style="position: relative;">
				<uni-icons size="22" type="cart"></uni-icons>
				<view class="name">购物车</view>
				<view v-if="carNum>0" style="border-radius: 100%; position: absolute;top: 0;right: 0; text-align: center;line-height: 30rpx;font-size: 24rpx; width: 30rpx;height: 30rpx;background-color: red;color: #fff;">{{carNum}}</view>
			</view>
			<view @click="enter(1)" class="shopCar">加入购物车</view>
			<view class="button" @click="enter(2)">立即下单</view>
		</view>
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance} from 'vue'
	import {onLoad,onShow} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {useNavStore} from '@/store/index.js'//引入空间
	const navStore = useNavStore()//给空间命名
	const {address,carNum} = storeToRefs(navStore);//解构数据
	const {proxy} = getCurrentInstance()
	const navobj = reactive({
		  title:'详情',
			image:true
	})
	const visible=ref(false)
	const clickMask=()=>{
		visible.value = false
	}
	const chnagevisible=()=>{
		visible.value= !visible.value
		
	}
  const tabIndex = ref(0)
	const act = ref({})
	const actIndex = ref(0)
	const id = ref('')
	const detail = ref(null)
	const attr = ref('')
	const type = ref(1)
	const actList = ref([])
	const total = ref('')
	const triggered = ref(false)
	const scrolly = ref(true)
	const scrollytwo = ref(false)
	const isxiding = ref(false)
	const pingjialist = ref([])
  const attrWindow = ref(null)
	onLoad((e)=>{
		id.value = e.id
		getData()
	}) 
	
	const	gomorepingjia=()=>{
		uni.navigateTo({
			url:'/pages-detail/pingjialist/pingjialist?id='+id.value
		})
	}
	//商品评论
	const pinglunfun=async()=>{
		var data = {itemId: id.value,pageNum:1,pageSize:5}
		const result = await proxy.$api.pingjiaapi(data)
		if(result.code==200){
			console.log('评价',result.rows);
			pingjialist.value = result
		}
	}
	const changeswiper=(e)=>{
		tabIndex.value = e.detail.current
	}
	const scroll=(e)=>{
		if(e.detail.scrollTop>500){
			isxiding.value =true
		}else{
			isxiding.value =false
		}
	
	}
	const gocar=()=>{
		uni.navigateTo({
			url: '/pages/shopcar/shopcar'
		})
	}
	//下拉刷新
	const pulldown=()=>{
		console.log('scroll-view下拉刷新控件被下拉');
		triggered.value=true
		getData()
	}
	const choosetabIndex=(e)=>{
		tabIndex.value = e
	}
	const navTo=(url)=> {
		uni.navigateTo({
			url: url
		})
	}
	const choose=(item,index)=>{
		act.value = item
		actList.value[index] = item.id
		price()
	}
	const price=async()=>{
		var data = {itemAttrValueId:actList.value.join(',')}
		const result = await  proxy.$api.attrValuePrice(data)
		if(result.code==200){
			console.log(result);
			total.value = result.data.price
		}
	}
	
	const close=()=> {
		if(detail.value.attrValueList){
		actList.value = detail.value.attrValueList.map(item=>{
			return item.attrValue[0].id
		})
		 attrWindow.value.close()
		}
	}
	const getData=async()=> {
		var data = {itemId:id.value}
		const result = await proxy.$api.shopDetail(data)
		if(result.code==200){
			console.log(result,'result');
			pinglunfun()
			triggered.value=false
			detail.value = result.data
			detail.value.sliderImage = JSON.parse(detail.value.sliderImage);
			detail.value.storeDetail = JSON.parse(detail.value.storeDetail);
			console.log(detail.value,'this.detail');
			if(detail.value.attrValueList){
				actList.value = detail.value.attrValueList.map(item=>{
					return item.attrValue[0].id
				})
				 price()
			}
		}
	}
	const enter=(e)=> {
		console.log(e);
		type.value = e
		act.value = detail.value.attrValueList[0]
		
		// attrWindow.value.open('bottom')
		chnagevisible()
	}
	const getNextHour=()=> {
		// 获取当前小时
		const now = new Date();
		let currentHour = now.getHours();

		// 计算当前小时加2小时后的时间（使用模运算处理超过23小时的情况）
		let newHour = `最快${(currentHour + 2) % 24}:00上门服务`;

		// 如果新小时在当天的7点到23点之间（包括7点和不包括24点/0点），则保持不变
		// 如果新小时是当天的0点到6点（不包括7点），则视为次日的10点
		if ((currentHour + 2) % 24 >= 18) {
			// 视为次日的10点，但函数只返回小时数
			return "最快次日10:00上门服务";
		}

		// 否则返回计算后的小时数
		return newHour;
	}
	const toBuy=()=>{
		uni.navigateTo({
			url: `/pages-detail/createorder/createorder?id=${id.value}&attrId=${act.value.id}&attrList=${JSON.stringify(actList.value)}`
		})
	}
	const addShop=async()=> {
		var list = actList.value.map(item=>{
				return {
					id:item
				}
			})
		var data = {
			"item": {
				"id": id.value
			},
			"itemAttrValue": list,
			"addingTimePrice": total.value,
			"num": 1,
			"isSelected": 1
		}
		console.log(data,'data');
		const result = await proxy.$api.addShopCar(data)
		if(result.code==200){
			navStore.getShopCar()		
			proxy.$showToast('添加成功')
			chnagevisible()
		}
	}

</script>

<style lang="scss">
	.popup-content {
		width: 750rpx;
		position: fixed;
		bottom: -200rpx;
		left: 0;
		background: #fff;
		// transform: translate3d(0, 100%, 0);
		transition: all 0.3s;
		z-index:999;
	}
	.isactive{
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		// transition: transform  2s;
		transition: all 0.8s;
		z-index:999;
	}
	.swipertwo {
		width: 750rpx;
		height:100vh;

		.swiperItem {
			width: 750rpx;
			height:100vh;
			position: relative;
		}
	
	}
	page{
		overflow: hidden;
	}
	.scroll-view{
		height: 100vh;width: 750rpx;overflow: hidden;
	}
	.tabBox {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		background-color: #fff;height: 90rpx;top: 0;left: 0;z-index: 555;
		.tabList {
			display: inline-block;
			background-color: $MainBackColor;
			border-radius: 20px;
			
			padding: 2px;

			.tab {
				display: inline-block;
				padding: 10px 16px;
				font-size: 12px;
			}

			.act {
				background-color: white;
				border-radius: 20px;
			}
		}
	}


	.window {
		background-color: white;
		padding: 20px;
		z-index:999;

		.title {
			font-weight: bold;
			display: flex;
			justify-content: space-between;
		}

		.shopBox {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.img {
				width: 60px;
				height: 60px;
			}

			.price {
				color: $red;
				font-size: 18px;

				.icon {
					font-size: 12px;
				}
			}
		}

		.listBox {
			display: flex;
			flex-wrap: wrap;
			margin: 30px 0px;
			
			.item{
				.attrBox{
					display: flex;
					flex-wrap: wrap;
					.attrItem{
						background-color: $backGrey;
						padding: 5px 10px;
						margin-right: 10px;
						border-radius: 5px;
						border: 1px solid $backGrey;
						font-size: 14px;
						margin-bottom: 10px;
					}
					
					.act {
						box-sizing: border-box;
						background-color: rgba(88, 155, 255, 0.2);
						border: 1px solid rgba(88, 155, 255, 0.5);
					}
				}
				
				.titleName{
					font-weight: bold;
					margin-bottom: 10px;
					font-size: 15px;
				}

			}
			

		}

		.buttonList {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.button {
				width: 100%;
				background: $linerBlue;
				color: white;
				text-align: center;
				padding: 8px 0px;
				border-radius: 50px;
			}
		}
	}

	.buttonBox {
		position: fixed;
		bottom: 0px;
		background-color: white;
		width: calc(100vw - 40px);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		box-shadow: 2px 2px 5px #a6a6a6;
		// z-index: 222;

		.text {
			font-weight: bold;
		}

		.kefu {
			border: none !important;
			background-color: white !important;
			padding: 0px !important;
			line-height: normal !important;
			margin: 0px !important;

			.name {
				font-size: 14px;
			}
		}

		.kefu::after {
			border: none !important;
		}

		.labelBox {
			display: flex;
			flex-direction: column;
			align-items: center;

			.name {
				font-size: 14px;
			}
		}

		.shopCar {
			display: flex;
			align-items: center;
			justify-self: center;
			background-color: #e6f8fc;
			color: #0bafee;
			padding: 12px 20px;
			border-radius: 50px;
			font-size: 12px;
		}

		.button {
			display: flex;
			align-items: center;
			justify-self: center;
			background: $linerBlue;
			color: white;
			padding: 12px 20px;
			border-radius: 50px;
			font-size: 12px;
		}
	}

	.box {
		height: 100vh;
		background-color: white;
	}

	.detailImg {
		width: 100vw;
	}


	@font-face {
		font-family: "服务保障";
		font-weight: 700;
		src: url("//at.alicdn.com/wf/webfont/Z6NGK12PNmYL/35t242aUqGAN.woff2") format("woff2"),
			url("//at.alicdn.com/wf/webfont/Z6NGK12PNmYL/MhakiH1M8FYg.woff") format("woff");
		font-display: swap;
	}

	.titleBox {
		background-color: white;
		background-color: $MainBackColor;
		margin: 20rpx;
		border-radius: 0 0 10px 10px;

		.line {
			margin: 0px 20px;
			background-color: $shollowGrey;
			width: calc(100% - 40px);
			height: 1px;
		}

		.bottom {
			display: flex;
			padding: 10px 20px;

			.address {
				font-size: 12px;
			}

			.time {
				font-size: 12px;
				margin-left: 10px;
			}
		}

		.form {
			padding: 10px 20px;

			.price {
				margin: 5px 0;
				color: $red;
				font-size: 16px;
				font-weight: bold;

				.icon {
					font-size: 12px;
				}

				.unit {
					font-size: 12px;
					color: $grey;
				}
			}
		}

		.title {
			font-weight: bold;
		}

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: $linerBlue;
			padding: 10px 20px;
			border-radius: 10px 10px 0 0;

			.text {
				font-weight: bold;
				font-family: '服务保障';
				font-size: 12px;
				color: white;
			}

			.tips {
				font-size: 12px;
				color: white;
			}
		}

		.cost {
			color: $red;
			font-size: 14px;
		}
	}
	

	.swiperBox {
		width: 750rpx;height: 500rpx;
		.item {
			display: flex;
			align-items: center;
			width: 750rpx;height: 500rpx;
			.img {
				width: 750rpx;
				height: 500rpx;
			}
		}

	}
</style>